import React from 'react'
import moment from 'moment'
import PropTypes from 'prop-types'
import { Table, Tag } from 'antd'
import { Color } from 'utils'
import styles from './recentSales.less'

const status = {
  1: {
    color: Color.green,
    text: 'SALE',
  },
  2: {
    color: Color.yellow,
    text: 'REJECT',
  },
  3: {
    color: Color.red,
    text: 'TAX',
  },
  4: {
    color: Color.blue,
    text: 'EXTENDED',
  },
}

function RecentSales({ data }) {
  let columnItems = [];
  if(data && data.length>0) {
    for (const key in data[0]) {
      columnItems.push({
        title: key.toUpperCase(),
        dataIndex: key,
      });
    }
  }
  const columns = columnItems;
  // const columns = [
  //   {
  //     title: 'NAME',
  //     dataIndex: 'name',
  //   },
  //   // {
  //   //   title: 'STATUS',
  //   //   dataIndex: 'status',
  //   //   render: text => <Tag color={status[text].color}>{status[text].text}</Tag>,
  //   // },
  //   {
  //     title: 'DATE',
  //     dataIndex: 'date',
  //     render: text => moment(text).format('YYYY-MM-DD'),
  //   },
  //   {
  //     title: 'PRICE',
  //     dataIndex: 'price',
  //     render: (text, it) => (
  //       <span style={{ color: status[it.status].color }}>${text}</span>
  //     ),
  //   },
  // ]
  return (
    <div className={styles.recentsales}>
      <Table
        pagination={false}
        columns={columns}
        rowKey='ID'
        dataSource={data.filter((item, key) => key < 6)}
      />
    </div>
  )
}

RecentSales.propTypes = {
  data: PropTypes.array,
}

export default RecentSales
